import React, { PropTypes, PureComponent } from 'react';
import { Form, DatePicker, Button, Row, Col } from 'antd';
import moment from 'moment';

import { dateConvert } from '../../utils/helper';

import styles from './dateSelect.less';

const FormItem = Form.Item;
const { MonthPicker } = DatePicker;

const dateFormat = 'YYYYMMDD';
const nowDate = new Date();

@Form.create()
export default class DateSelect extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      endOpen: false,
      startTime: props.defaultBeginDate,
      endTime: props.defaultEndDate,
    };
  }

  disabledStartDate = (startTime) => {
    const endTime = this.state.endTime;
    if (!startTime || !endTime) {
      return false;
    }
    return startTime.valueOf() > endTime.valueOf();
  }

  disabledEndDate = (endTime) => {
    const startTime = this.state.startTime;
    if (!endTime || !startTime) {
      return false;
    }
    return endTime.valueOf() <= startTime.valueOf();
  }

  onChange = (field, value) => {
    console.log('field:>>', field, 'value:>>', value);
    this.setState({
      [field]: value,
    });
  }

  onStartChange = (value, dateStrings) => {
    console.log('start>>>>', dateStrings);
    this.onChange('startTime', dateStrings);
  }

  onEndChange = (value, dateStrings) => {
    this.onChange('endTime', dateStrings);
  }

  handleStartOpenChange = (open) => {
    if (!open) {
      this.setState({ endOpen: true });
    }
  }

  handleEndOpenChange = (open) => {
    this.setState({ endOpen: open });
  }

  onQuery = () => {
    const { startTime, endTime } = this.state;
    if (!endTime || !startTime) {
      return;
    }
    this.props.onQuery({ startTime, endTime });
  }

  render() {
    const {
      form,
      label,
      buttonText,
      location: { query: { begindate, enddate } },
    } = this.props;
    const { endOpen } = this.state;
    const { getFieldDecorator } = form;
    const nowDate = new Date();
    let startTime = [];
    let endTime = [];
    if (begindate) {
      startTime = moment(begindate, dateFormat);
    } else {
      startTime = moment(nowDate, dateFormat);
    }
    if (enddate) {
      endTime = moment(enddate, dateFormat);
    } else {
      endTime = moment(nowDate, dateFormat);
    }

    return (
      <Form className={styles.dataSelect}>
        <FormItem label={label}>
          <DatePicker
            format="YYYYMMDD"
            defaultValue={moment(startTime)}
            placeholder="开始时间"
            onChange={this.onStartChange}
            onOpenChange={this.handleStartOpenChange}
          />
          <span style={{ margin: 5 }}>——</span>
          <DatePicker
            format="YYYYMMDD"
            defaultValue={moment(endTime)}
            placeholder="结束时间"
            onChange={this.onEndChange}
            open={endOpen}
            onOpenChange={this.handleEndOpenChange}
          />
        </FormItem>
        <Button type="primary" onClick={this.onQuery} >
          {buttonText}
        </Button>
      </Form >
    );
  }
}

DateSelect.PropTypes = {
  form: PropTypes.object.isRequired,
  onQuery: PropTypes.func.isRequired,
};
